<!--
 * @Descripttion: 出手鸭小程序
 * @version:1.0.1 
 * @Author: HHL
 * @Date: 2023-10-08 14:50:10
 * @LastEditTime: 2025-09-17 20:26:06
 * @LastEditors: sueRimn
-->

<template>
  <view class="item" @click="goDetail()">
    <view class="head d-flex justify-content-between">
      <view class="time">{{item.createdAt}}</view>
      <view class="status">{{item.orderStatusText}}</view>
    </view>

    <view class="d-flex justify-content-between">
      <view class="phone-info d-flex">
        <view class="image flex-shrink-0">
          <common-image
            :src="item.productImage ? item.productImage + '?x-oss-process=image/resize,m_fill,h_150,w_150' : ''"
            :styles="'width: 150rpx; height: 150rpx; display: block; border-radius: 12rpx;mix-blend-mode: multiply;'"
          />
        </view>
        <view class="info">
          <view class="name">{{item.productName}}</view>
          <view class="tag">{{item.orderTypeText}}</view>
        </view>
      </view>
      <view class="price_wrap">
        <view class="price">￥{{item.orderPrice}}</view>
        <view class="text">预估价</view>
      </view>
    </view>

    <view class="btns d-flex justify-content-end">
      <!-- <view class="btn">联系客服</view> -->
      <view class="btn" @click.stop="goEvaluation">重新估价</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    item: { type: Object, default: {evaluateProduct: {}} }
  },

  data() {
    return {

    }
  },

  methods: {
    goDetail() {
      uni.navigateTo({
        url: `/pages/order/logistics-detail?orderNo=${this.item.orderNo}`
      })
    },

    // 重新估价
    goEvaluation() {
      uni.navigateTo({
        url: `/pages/product/index?id=${this.item.productId}`
      })
    }
  }
}
</script>


<style lang="scss" scoped>

.item{
  background: #fff;
  border-radius: 20rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
}

.head{
  padding-bottom: 34rpx;
  line-height: 32rpx;
  .time{
    font-size: var(--hui-font-size-26);
    color: var(--hui-color-subtitle);
  }
  .status{
    font-size: var(--hui-font-size-26);
    color: var(--hui-color-title);
  }
}

.phone-info{
  .image {
    background: #F7F7F7;
    border-radius: 16rpx;
  }
  .info{
    width: 320rpx;
    padding-left: 20rpx;
    .name{
      font-size: 30rpx;
      font-weight: 500;
      color: var(--hui-color-title);
      line-height: 42rpx;
      margin: 4rpx 0 14rpx;
    }
    .tag{
      border: 1px solid var(--hui-color-border);
      line-height: 38rpx;
      width: 140rpx;
      border-radius: 20rpx;
      text-align: center;
      color: var(--hui-color-subtitle);
      font-size: var(--hui-font-size-24);

    }
  }
}

.price_wrap{
  text-align: right;
  .price{
    font-size: 30rpx;
    font-weight: bold;
    color: var(--hui-color-primary);
    line-height: 50rpx;
  }
  .text{
    line-height: 44rpx;
    font-size: var(--hui-font-size-26);
    color: var(--hui-color-subtitle);
  }
}

.btns{
  margin: 32rpx 0 0 0;
  .btn{
    width: 144rpx;
    border: 1px solid var(--hui-color-border);
    line-height: 54rpx;
    border-radius: 30rpx;
    color: var(--hui-color-title);
    font-weight: 500;
    text-align: center;
    margin-left: 24rpx;
    font-size: var(--hui-font-size-26);
  }
}
</style>